<template>
  <section class="sample-section"  v-loading.lock="loading" element-loading-text="拼命加载中">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="160px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>实名信息</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="真实姓名" prop="real_name">
              <el-input v-model="dataForm.real_name" :disabled="true"  placeholder="真实姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="dataForm.phone" :disabled="true"  placeholder="联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="身份证号码" prop="id_card">
              <el-input v-model="dataForm.id_card" :disabled="true"  placeholder="身份证号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="身份证人像面" prop="id_card_front">
              <el-image :src="dataForm.id_card_front" style="width: 300px; height: 200px"></el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="身份证国徽面" prop="id_card_reverse">
              <el-image :src="dataForm.id_card_reverse" style="width: 300px; height: 200px"></el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>银行信息</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="开户银行" prop="bank_title">
              <el-input v-model="dataForm.bank_title" placeholder="开户银行"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="银行卡号" prop="bank_number">
              <el-input v-model="dataForm.bank_number" placeholder="银行卡号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="支行名称" prop="bank_address">
              <el-input v-model="dataForm.bank_address" placeholder="支行名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>支付宝信息</span>
        </div>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="支付宝真实姓名" prop="alipay_name">
              <el-input v-model="dataForm.alipay_name" placeholder="支付宝真实姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="item-row">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="支付宝账号" prop="alipay_account">
              <el-input v-model="dataForm.alipay_account" placeholder="支付宝账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-row :gutter="10" class="item-row">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item>
            <el-button type="warning" @click="dataFormSubmit()" :disabled="submit">保存信息</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </section>
</template>

<script>
    export default {
      name: "details",
      data() {
        return {
          loading: false,
          id: '',
          dataForm: {
            'username': '',
            'wechat_openid': '',
            'last_login_time': '',
            'status': '',
            'real_name': '',
            'phone': '',
            'id_card': '',
            'id_card_front': '',
            'id_card_reverse': '',
            'bank_number': '',
            'bank_title': '',
            'bank_phone': '',
            'bank_address': '',
            'alipay_account': '',
            'alipay_name': '',
          }
        }
      },
      activated () {
        this.loading = true
        this.id = this.$route.query ? this.$route.query.id : null;
        this.getData()
      },
      filters: {
        // 截取当前数据到小数点后两位
        numFilter(value) {
          const realVal = parseFloat(value).toFixed(2);
          return realVal;
        }
      },
      methods: {
        getData() {
          if(!this.id) {
            this.$message.error("请求参数错误")
            this.$parent.$parent.$parent.$parent.tabsCloseCurrentHandle()
            this.$router.push({ name: 'member-list'})
          }
          this.$http({
            url: this.$http.adornUrl(`/member/info/${this.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then((result) => {
            let _data = result.data.member
            this.dataForm.username = _data.username
            this.dataForm.real_name = _data.member_info.real_name
            this.dataForm.phone = _data.member_info.phone
            this.dataForm.bank_title = _data.member_info.bank_title
            this.dataForm.bank_number = _data.member_info.bank_number
            this.dataForm.bank_address = _data.member_info.bank_address
            this.dataForm.bank_phone = _data.member_info.bank_phone
            this.dataForm.alipay_name = _data.member_info.alipay_name
            this.dataForm.alipay_account = _data.member_info.alipay_account
            this.dataForm.address = _data.member_info.address
            this.dataForm.id_card = _data.member_info.id_card
            this.dataForm.id_card_front = _data.member_info.id_card_front
            this.dataForm.id_card_reverse = _data.member_info.id_card_reverse
          })
          setTimeout(() => {
            this.loading = false
          }, 500);
        },

        // 表单提交
        dataFormSubmit () {
          console.log(this.data)
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              this.$http({
                url: this.$http.adornUrl(`/member/update`),
                method: 'post',
                data: this.$http.adornData({
                  member_id: this.id,
                  bank_title: this.dataForm.bank_title,
                  bank_number: this.dataForm.bank_number,
                  bank_address: this.dataForm.bank_address,
                  alipay_name: this.dataForm.alipay_name,
                  alipay_account: this.dataForm.alipay_account,
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '更新成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.$parent.$parent.$parent.$parent.tabsCloseCurrentHandle()
                  this.$router.push({ name: 'member-list'})
                } else {
                  this.$message.error(data.msg)
                }
              }).catch((error) => {
                this.$message.error('请求异常')
              })
            }
          })
        },
      }
    }
</script>

<style lang="scss" scoped>
  .box-card {
    margin-bottom: 20px;
  }

  .buttons {
    margin-top: 15px;
    text-align: center;
    .el-button {
      width: 100px;
    }
  }

  /deep/ .el-form {
    .el-input__inner {
      color: #606266 !important;
    }
  }
</style>
